<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!--
 * FCKeditor - The text editor for Internet - http://www.fckeditor.net
 * Copyright (C) 2003-2010 Frederico Caldeira Knabben
 *
 * == BEGIN LICENSE ==
 *
 * Licensed under the terms of any of the following licenses at your
 * choice:
 *
 *  - GNU General Public License Version 2 or later (the "GPL")
 *    http://www.gnu.org/licenses/gpl.html
 *
 *  - GNU Lesser General Public License Version 2.1 or later (the "LGPL")
 *    http://www.gnu.org/licenses/lgpl.html
 *
 *  - Mozilla Public License Version 1.1 or later (the "MPL")
 *    http://www.mozilla.org/MPL/MPL-1.1.html
 *
 * == END LICENSE ==
-->
<html>
<head>
	<title>FCKToolbarButtonUI Test</title>
	<script type="text/javascript">
var FCK = new Object() ;	// Used by fckconfig
	</script>
	<script src="../../../editor/_source/fckjscoreextensions.js" type="text/javascript"></script>
	<script src="../../../editor/_source/fckconstants.js" type="text/javascript"></script>
	<script src="../../../editor/_source/internals/fckbrowserinfo.js" type="text/javascript"></script>
	<script src="../../../editor/_source/classes/fckiecleanup.js" type="text/javascript"></script>
	<script src="../../../editor/_source/internals/fcktools.js" type="text/javascript"></script>
	<script src="../../../editor/_source/internals/fckconfig.js" type="text/javascript"></script>
	<script src="../../../editor/_source/classes/fckicon.js" type="text/javascript"></script>
	<script src="../../../editor/_source/classes/fcktoolbarbuttonui.js" type="text/javascript"></script>
	<style type="text/css">
		.ToolbarBase
		{
			cursor: default;
			background-color: #efefde;
		}

		.ToolbarBase TD
		{
			font-size: 11px;
			font-family: 'Microsoft Sans Serif' , Tahoma, Arial, Verdana, Sans-Serif;
		}
	</style>
	<script type="text/javascript">

var FCK_IMAGES_PATH = '../_common/' ;
var FCK_SPACER_PATH = '../_common/spacer.gif' ;

function LoadScript( url )
{
	document.write( '<script type="text/javascript" src="' + url + '"><\/script>' ) ;
}
var sSuffix = /msie/.test( navigator.userAgent.toLowerCase() ) ? 'ie' : 'gecko' ;
LoadScript( '../../../editor/_source/internals/fcktools_' + sSuffix + '.js' ) ;

	</script>
	<script type="text/javascript">

if ( FCKBrowserInfo.IsIE )
	FCK.IECleanup = new FCKIECleanup( window ) ;

var FCK_SPACER_PATH = '../_common/spacer.gif' ;

FCKConfig.SkinPath = '../../../editor/skins/default/' ;

// Includes the skin CSS in the main page.
document.write( '<link href="' + FCKConfig.SkinPath + 'fck_editor.css" type="text/css" rel="stylesheet">' ) ;

var oButton1, oButton2, oButton3, oButton4 ;

window.onload = function()
{
	oButton1 = new FCKToolbarButtonUI( 'Smiley', null, 'Smiley Tooltip', 'test1/smiley.gif' ) ;
	oButton2 = new FCKToolbarButtonUI( 'Next', null, null, ['test1/strip.gif',16,1] ) ;
	oButton3 = new FCKToolbarButtonUI( 'Search', null, null, ['test1/strip.gif',16,2] ) ;
	oButton4 = new FCKToolbarButtonUI( 'Previous', null, 'Search Tooltip', ['test1/strip.gif',16,3] ) ;

	oButton4.ShowArrow = true ;

	oButton1.OnClick = oButton2.OnClick = oButton3.OnClick = oButton4.OnClick = OnButtonClick ;
	Create() ;

	var i = 0 ;
	var iIcon = 0 ;

	var eBigTable = document.getElementById( '_BigTable') ;

	for ( var r = 0 ; r < eBigTable.rows.length ; r++ )
	{
		var eRow = eBigTable.rows[r] ;

		for ( var c = 0 ; c < eRow.cells.length ; c++ )
		{
			var eCell = eRow.cells[c] ;

			i++ ;

			if ( iIcon == 3 )
				iIcon = 1 ;
			else
				iIcon++ ;

			var oNewButton = new FCKToolbarButtonUI( 'Test_' + i, 'Test ' + i, 'Test ' + i + ' Tooltip', ['test1/strip.gif',16,iIcon], FCK_TOOLBARITEM_ICONTEXT ) ;
			oNewButton.OnClick = OnButtonClick ;
			oNewButton.Create( eCell ) ;
		}
	}
}

function Create()
{
	oButton1.Create( document.getElementById( 'eTarget1' ) ) ;
	oButton2.Create( document.getElementById( 'eTarget2' ) ) ;
	oButton3.Create( document.getElementById( 'eTarget3' ) ) ;
	oButton4.Create( document.getElementById( 'eTarget4' ) ) ;

	// Disable mouse selection operations.
	FCKTools.DisableSelection( document.getElementById( 'eToolbarBase' ) ) ;
}

function OnButtonClick( button )
{
	alert( button.Name ) ;
}

function ChangeStyle( newStyle )
{
	oButton1.Style = oButton2.Style = oButton3.Style = oButton4.Style = newStyle ;
	Create() ;
}

function ChangeState( newState )
{
	oButton1.ChangeState( newState ) ;
	oButton2.ChangeState( newState ) ;
	oButton3.ChangeState( newState ) ;
	oButton4.ChangeState( newState ) ;
}
	</script>
</head>
<body>
	<table height="100%" align="center">
		<tr>
			<td align="center">
				<select onchange="ChangeStyle( this.value );">
					<option value="0">Only Icon</option>
					<option value="1">Only Text</option>
					<option value="2">Icon and Text</option>
				</select>
				<select onchange="ChangeState( this.value );">
					<option value="0">Off</option>
					<option value="1">On</option>
					<option value="-1">Disabled</option>
				</select>
			</td>
		</tr>
		<tr>
			<td height="100%" align="center">
				<table width="100" height="100">
					<tr>
						<td align="center" class="ToolbarBase" id="eToolbarBase">
							<table>
								<tr>
									<td id="eTarget1"></td>
									<td id="eTarget2"></td>
									<td id="eTarget3"></td>
									<td id="eTarget4"></td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
				<br />
				<input size="80" value="This field must not loose the focus" />
				<br />
				<br />
				<table>
					<tr>
						<td align="center" class="ToolbarBase" id="eToolbarBase2" style="padding: 20px;">
							<table id="_BigTable" cellpadding="0" cellspacing="0">
								<tr>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
</body>
</html>
